<template>
    <view class="main">

        <!--    <image class="cover" :src="detail.cover"></image>-->


        <swiper class="cover" :indicator-dots="true" :autoplay="true" :circular="true">
            <swiper-item v-for="src in detail.images" :key="src">
                <image :src="src" mode="aspectFill" class="cover"></image>
            </swiper-item>
        </swiper>

        <view class="header">
            <view>
                <view class="title">{{ detail.comName }}</view>
                <view class="tags">
                    <view class="tag">已销售{{ detail.serviceCount }}</view>
                </view>
            </view>
            <view>
                <text class="cuIcon-favorfill star" :class="{collect:detail.collect==1}" @click="handleStarClick"></text>
            </view>
        </view>

        <view class="info bg-white">

            <view class="item">
                <text class="cuIcon-location left"></text>
                <view class="name ">
                    <view class="text-cut">{{ detail.address }}</view>
                    <view class="text-gray">距离您{{ detail.distance }}</view>
                </view>
                <view class="right">
                    <image class="img" src="/static/img/qt/navigation.png" @click="handleOpenLocation"></image>
                </view>
            </view>

            <view class="item">
                <text class="left"></text>
                <view class="name text-cut">商家电话：{{ detail.hotTel }}</view>
                <view class="right">
                    <image class="img" src="/static/img/qt/call.png" @click="handleCall"></image>
                </view>
            </view>

            <view class="item">
                <text class="left"></text>
                <view class="name text-cut">营业时间：{{ detail.open }} - {{ detail.end }}</view>
            </view>

            <view class="coupon">

                <view class="item" @click="handleCouponOpenClick">
                    <view class="label">优惠券</view>
                    <view class="btn">查看</view>
                </view>

                <view class="item" @click="handleCardClick">
                    <view class="label">会员卡</view>
                    <view class="btn">查看</view>
                </view>

                <view class="item" @click="handleOffPayClick">
                    <view class="label">线下支付</view>
                    <view class="btn">前往</view>
                </view>
            </view>

        </view>


        <view class="navigation" :class="{'has-notice':notice.length > 0}">
            <view class="notice" v-if="notice.length > 0">
                <view class="icon">
                    <text class="cuIcon-notificationfill"></text>
                </view>
                <view class="content">
                    <view :class="'content-wrapper '+getSpeed()">
                        <view class="content-text">{{ notice }}</view>
                    </view>
                </view>
            </view>
            <view class="tabs">
                <view class="tab" :class="{active:currentTab==0}" @click="handleTabClick(0)">项目</view>
                <view class="tab" :class="{active:currentTab==1}" @click="handleTabClick(1)">评论 ({{ commentNums["全部"] }})</view>
            </view>


            <view class="navigation-wrapper" v-if="currentTab == 0">

                <view class="nav">
                    <view class="item" :class="{current:-1 == current}" @click="handleNavClick(null,-1)">
                        手艺人
                    </view>
                    <view class="item" v-for="(item,i) in navs" :key="i" :class="{current:i == current}"
                          @click="handleNavClick(item,i)">
                        {{ item.classifyName }}
                    </view>
                </view>


                <view class="list" :class="{goods:current!=-1}">
                    <!--手艺人-->
                    <template v-if="current == -1">
                        <view class="item" v-for="(item,i) in list" :key="i">
                            <image class="avatar" :src="item.headimg"></image>
                            <view class="right">
                                <view class="top">
                                    <view class="name">{{ item.nickname }}</view>
                                    <view class="btn" @click="handleTechnicianClick(item)">预约</view>
                                </view>
                                <view class="tip">今日{{ item.yyNum }}人已约</view>
                                <view class="image-list">
                                    <view class="image-wrapper" v-for="(word,i) in item.works" :key="i">
                                        <image class="image" :src="word.cover" @click="handleWorkInfoClick(word)"></image>
                                    </view>
                                </view>
                                <view class="more" @click="handleTechnicianMore(item)">
                                    <text>查看作品{{ item.worksCount }}个</text>
                                    <text class="cuIcon-right"></text>
                                </view>

                            </view>
                        </view>
                    </template>
                    <!--项目-->
                    <template v-else>
                        <view class="item" v-for="(item,i) in list" :key="i" @click="handleProjectInfoClick(item)">
                            <image class="avatar" :src="item.cover"></image>
                            <view class="right">
                                <view class="top">
                                    <view class="name">{{ item.goodsName }}</view>
                                    <view class="btn" @click.stop="handleProjectClick(item)">选择</view>
                                </view>
                                <view class="price">
                                    <view class="tip">￥{{ item.price }}</view>
                                    <view class="line" v-if="item.linePrice != '0.00'">￥{{ item.linePrice }}</view>
                                </view>
                                <view class="time">
                                    <text>预计服务时长</text>
                                    <text class="light">{{ item.cycle }}</text>
                                    <text> 分钟</text>
                                </view>
                            </view>
                        </view>
                    </template>

                    <list-loading v-if="loading"/>
                    <list-empty v-if="!loading && (!list || list.length == 0)"/>
                    <list-load-over v-else-if=" loadOver"/>

                </view>

            </view>

            <view class="comment-wrapper" v-else>

                <view class="tags">
                    <view class="tag" v-for="(tag,i) in commentTags" :key="i" :class="{active:currentTag==i}"
                          @click="handleTagClick(tag,i)">
                        <text>{{ tag.title }}</text>
                        <text class="num">{{ commentNums[tag.title] }}</text>
                    </view>
                </view>

                <view class="item" v-for="(item,i) in list" :key="i">
                    <image class="left" :src="item.headimg"></image>

                    <view class="right">
                        <view class="top">
                            <view class="name text-cut">{{ item.nickname }}</view>
                            <view class="time">{{ item.createTime }}</view>
                        </view>
                        <view class="info">
                            <text class="label">综合评分</text>
                            <starts :value="item.staffScore" read-only/>
                        </view>
                        <view class="content">{{ item.comment }}</view>
                        <view class="grid col-4 grid-square flex-sub" v-if="item.images && item.images.length > 0">
                            <view class="image-wrapper" v-for="(image,j) in item.images" :key="j">
                                <image class="img" :src="image" @click="viewImage(image)"></image>
                            </view>
                        </view>

                    </view>

                </view>


                <list-loading v-if="loading"/>
                <list-empty v-if="!loading && (!list || list.length == 0)"/>
                <list-load-over v-else-if=" loadOver"/>
            </view>

        </view>

        <action-sheet ref="coupon" title="领取优惠券">
            <view class="coupon-list">
                <view v-if="couponList && couponList.length == 0" class="none">什么都没有...</view>
                <template v-else>
                    <view v-for="(item,i) in couponList" :key="i" class="item">
                        <view class="money">
                            <text>￥</text>
                            <text class="num">{{ item.saleMoney }}</text>
                        </view>
                        <view class="center">
                            <view class="title" v-if="item.needMoney == 0">店铺通用券</view>
                            <view class="title" v-else>满 {{ item.needMoney }} 可用</view>
                            <view class="desc" v-if="item.cycle == 0">永久有效</view>
                            <view class="desc" v-else>有效期：{{ item.cycle }} 天</view>
                        </view>
                        <button class="right cu-btn" @click="handleReciveCoupon(item)">领取</button>
                    </view>
                </template>

            </view>
        </action-sheet>

    </view>
</template>

<script>
import ActionSheet from "@/components/action-sheet";
import Api from "@/utils/Api";
import ListLoading from "@/components/list/loading";
import ListEmpty from "@/components/list/empty";
import ListLoadOver from "@/components/list/loadOver";
import Starts from "@/components/stars";

export default {
    name: "shop-index",
    components: {Starts, ListLoadOver, ListEmpty, ListLoading, ActionSheet},
    data() {
        return {
            id: 0,
            current: -1,
            detail: {},
            navs: [],
            couponList: null,
            loading: false,
            loadOver: false,
            list: [],
            page: 0,
            notice: '',
            location: {},
            currentTab: 0,
            currentTag: 0,
            commentNum: {cp: 0, hp: 0, yt: 0, zp: 0,},
            commentTags: [
                {title: "全部", nums: ['cp', 'hp', 'zp']},
                {title: "满意", nums: ['hp'], params: {'evaluate': 3}},
                {title: "一般", nums: ['zp'], params: {'evaluate': 2}},
                {title: "不满意", nums: ['cp'], params: {'evaluate': 1}},
                {title: "有图", nums: ['yt'], params: {'is_image': 1}},
            ],
        }
    },
    onLoad(options) {
        options = this.core.decodeURIComponentObject(options);
        let {q, id} = options;
        if (q) {
            let map = this.core.parseParameterMap(q);
            id = map.sid;
        }
        this.id = id;
        this.core.getLocation(res => {
            this.location = res;
            this.getShop();
            this.getClassify();
            this.getList();
            this.getShopNotice();
            this.getCommentNum();
        })
    },
    computed: {
        commentImages() {
            let res = []
            if (this.currentTab == 0) return res;
            this.list.forEach(item => {
                res.push(...item.images)
            })
            return res;
        },
        commentNums() {
            let res = {};
            this.commentTags.forEach(tag => {
                let {title, nums} = tag;
                let num = 0;
                nums.forEach(n => {
                    num += this.commentNum[n];
                })
                res[title] = num;
            })
            return res;
        },
    },
    methods: {
        viewImage(image) {
            let arr = this.commentImages;
            console.log(arr, image, arr.indexOf(image))
            uni.previewImage({
                urls: this.commentImages,
                current: image
            })
        },
        handleTabClick(tab) {
            this.currentTab = tab
            this.clear();
            this.getList();
            if (tab == 1) {
                this.getCommentNum();
            }
        },
        getSpeed() {
            let num = Math.ceil(this.notice.length / 10);
            if (num <= 2) num = 1;
            else if (num <= 4) num = 2;
            else if (num <= 6) num = 3;
            else if (num <= 8) num = 4;
            else num = 5;
            return 'speed-' + num;
        },
        getShopNotice() {
            Api.getShopNotice(this.id).then(res => {
                this.notice = res || ""
            })
        },
        // 获取店铺信息
        getShop() {
            let {latitude, longitude} = this.location
            Api.getShopDetail(this.id, latitude, longitude,).then(res => {
                this.detail = res;
            })
        },
        // 获取项目类别
        getClassify() {
            Api.getGoodsClassify(this.id).then(res => {
                this.navs = res;
            })
        },
        // 获取项目或者技师列表
        getList() {
            if (this.loadOver) return;
            this.loading = true;
            if (this.currentTab == 0) {
                if (this.current == -1) this.getTechnicianList();
                else this.getGoodsList();
            } else {
                this.getCommentList();
            }
        },
        // 获取技师
        getTechnicianList() {
            Api.getTechnicianList(this.id).then(res => {
                this.list = res;
                this.loadOver = true;
            }).finally(() => this.loading = false)
        },
        // 获取项目
        getGoodsList() {
            let data = {goods_classify_id: this.navs[this.current].id, page: ++this.page};
            Api.getGoods(data).then(res => {
                this.list.push(...res);
                if (res.length < 10) this.loadOver = true;
            }).finally(() => this.loading = false)
        },
        // 获取评论列表
        getCommentList() {
            let data = {
                com_id: this.id,
                page: ++this.page
            }
            Object.assign(data, this.commentTags[this.currentTag].params);
            Api.getShopComments(data).then(res => {
                this.list.push(...res)
                if (res.length < 10) this.loadOver = true;
            }).finally(() => this.loading = false)
        },
        // 获取评论数量
        getCommentNum() {
            Api.getCommentNum(this.id).then(res => {
                this.commentNum = res;
            })
        },
        clear() {
            this.page = 0;
            this.list = [];
            this.loadOver = false;
            this.loading = false;
        },
        // 领取优惠券
        handleReciveCoupon(item) {
            Api.receiveCoupon(item.id).then(res => {
                this.$toast("领取成功");
            })
        },
        // 打开优惠券
        handleCouponOpenClick() {
            if (this.couponList === null) {
                Api.getCouponList(this.id).then(res => {
                    this.couponList = res;
                })
            }
            this.$refs.coupon.show()
        },
        handleTagClick(tag, i) {
            this.currentTag = i;
            this.clear();
            this.getList();
        },

        // 侧边栏点击
        handleNavClick(item, i) {
            this.current = i;
            this.clear();
            this.getList();
        },
        // 技师更多信息
        handleTechnicianMore(item) {
            console.log(item)
            uni.navigateTo({url: `/pages/shop/technician/index?id=${item.id}`})
        },
        // 导航
        handleOpenLocation() {
            uni.openLocation({
                longitude: Number(this.detail.lng),
                latitude: Number(this.detail.lat),
                name: this.detail.address
            })
        },
        // 打电话
        handleCall() {
            uni.makePhoneCall({phoneNumber: this.detail.hotTel})
        },
        // 点击技师
        handleTechnicianClick(item) {
            let data = {
                shopId: this.id,
                tId: item.id,
                tName: item.nickname
            }
            uni.navigateTo({url: `/pages/shop/choose/project/index?${this.core.parseQueryString(data)}`})
        },
        // 点击项目
        handleProjectClick(item) {
            let classify = this.navs[this.current];
            let data = {
                shopId: this.id,
                classifyId: classify.id,
                classifyName: classify.classifyName,
                goodsId: item.id,
                goodsName: item.goodsName,
                price: item.price,
                linePrice: item.linePrice
            }
            uni.navigateTo({url: `/pages/shop/choose/technician/index?${this.core.parseQueryString(data)}`})
        },
        // 项目详情
        handleProjectInfoClick(item) {
            uni.navigateTo({url: `/pages/shop/goods/detail?id=${item.id}`})
        },
        // 会员卡
        handleCardClick() {
            uni.navigateTo({url: `/pages/shop/card/index?id=${this.id}`})
        },
        // 收藏
        handleStarClick() {
            let collect = this.detail.collect;
            let newCollect = collect == 0 ? 1 : 0;
            Api.collectStore(this.id).then(res => {
                this.$set(this.detail, "collect", newCollect)
                this.$toast(collect == 0 ? "收藏成功" : "取消收藏成功")
            })
        },
        handleWorkInfoClick(item) {
            // uni.navigateTo({url: `/pages/shop/technician/info?id=${item.memberId}`})
        },
        handleOffPayClick() {
            uni.navigateTo({url: `/pages/index/my/offline-trading/index?shopId=${this.id}`})
        },
    },
    onPullDownRefresh() {
        this.clear();
        this.getList();
    },
    onReachBottom() {
        this.getList();
    },
}
</script>

<style scoped lang='scss'>
.main {
    .cover {
        width: 100%;
        height: r(750px);
    }

    .header {
        background-color: white;
        margin-bottom: r(24px);
        padding: r(14px 40px);
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
            font-size: r(32px);
            font-weight: 500;
            color: #121212;
        }

        .tags {
            display: flex;

            .tag {
                border: 1px solid #FD3737;
                color: #FD3737;
                border-radius: r(5px);
                padding: r(0 13px);
                font-size: r(24px);
                margin-top: r(14px);
            }
        }

        .star {
            font-size: r(50px);
            color: #aaa;

            &.collect {
                color: #FCD93D;
            }
        }
    }

    .info {
        padding: r(30px 30px);

        & > .item {
            display: flex;
            align-items: center;
            color: #121212;
            font-size: r(26px);

            & + .item {
                margin-top: r(30px);
            }

            .left {
                width: r(34px);
            }

            .name {
                flex: 1;
            }

            .right {
                display: flex;
                flex-direction: column;
                align-items: flex-end;

                .img {
                    height: r(34px);
                    width: r(34px);
                }


            }
        }

        .coupon {
            display: flex;
            margin: r(50px 0 30px 0);
            color: #333333;
            font-size: r(30px);

            .item {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .label {
                    margin-bottom: r(30px);
                    text-align: center;
                }

                .btn {
                    text-align: center;
                    height: r(40px);
                    line-height: r(40px);
                    width: r(126px);
                    border-radius: r(50px);
                    background-color: $primary-color;
                    font-size: r(20px);
                    color: #FFFFFF;
                }

            }

        }

    }

    .navigation {
        height: calc(100vh - var(--window-top));

        &.has-notice {
            .navigation-wrapper {
                min-height: calc(100% - #{r(70px + 80px)});
            }

            .nav {
                top: calc(var(--window-top) + #{r(70px + 80px)});
            }

            .tabs {
                top: calc(var(--window-top) + #{r(70px )});
            }
        }

        @keyframes around {
            from {
                transform: translateX(10%);
            }
            to {
                transform: translateX(-100%);
            }
        }

        .notice {
            position: sticky;
            top: var(--window-top);
            left: 0;
            height: r(70px);
            background-color: #fee4e3;
            color: #c7656c;
            display: flex;
            align-items: center;
            z-index: 999;

            .icon {
                width: r(50px);
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .content {
                flex: 1;
                width: calc(100% - #{r(50px)});
                overflow: hidden;

                .content-wrapper {
                    display: inline-block;
                    white-space: nowrap;
                    animation-name: around;
                    animation-iteration-count: infinite;
                    animation-timing-function: linear;

                    &.speed-1 {
                        animation-duration: 5s;
                    }

                    &.speed-2 {
                        animation-duration: 10s;
                    }

                    &.speed-3 {
                        animation-duration: 15s;
                    }

                    &.speed-4 {
                        animation-duration: 20s;
                    }

                    &.speed-5 {
                        animation-duration: 30s;
                    }
                }

                .content-text {
                    display: inline-block;

                    & + .content-text {
                        margin-left: r(100px);
                    }
                }
            }
        }

        .tabs {
            z-index: 999;
            display: flex;
            background-color: white;
            position: sticky;
            top: var(--window-top);
            left: 0;
            //box-shadow: 0 0 r(20px) r(2px) rgba(0,0,0,.1);
            //margin-bottom: r(20px);

            .tab {
                height: r(80px);
                min-width: r(120px);
                display: flex;
                justify-content: center;
                align-items: center;
                border-bottom: 1px solid transparent;

                &.active {
                    border-color: $primary-color;
                    color: $primary-color;
                }
            }
        }

        .navigation-wrapper {
            display: flex;
            background-color: white;
            align-items: flex-start;
            min-height: 100%;
        }

        .nav {
            width: r(160px);
            background: #F9F9F9;
            font-size: r(30px);
            margin-bottom: env(safe-area-inset-bottom);
            position: sticky;
            top: calc(var(--window-top) + #{r(80px )});
            left: 0;

            .item {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: r(30px 40px);
                color: #909090;

                &.current {
                    color: #333333;
                    background-color: white;
                }
            }
        }

        .list {
            flex: 1;
            width: calc(100% - #{r(160px)});
            padding: r(30px);
            padding-bottom: calc(env(safe-area-inset-bottom) + #{r(30px)});

            .item {
                box-shadow: r(0px 4px 18px 0px) rgba(4, 0, 0, 0.13);
                border-radius: r(15px);
                overflow: hidden;
                padding: r(20px);
                display: flex;
                margin-bottom: r(30px);

                .avatar {
                    height: r(138px);
                    width: r(138px);
                    border-radius: r(12px);
                }

                .right {
                    flex: 1;

                    .top {
                        margin-left: r(20px);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .name {
                            flex: 1;
                        }

                        .btn {
                            color: white;
                            width: r(100px);
                            height: r(45px);
                            line-height: r(45px);
                            background: #BF8F3A;
                            border-radius: r(50px);
                            font-size: r(22px);
                            text-align: center;
                        }
                    }

                    .tip {
                        font-size: r(22px);
                        font-weight: bold;
                        color: #FF531E;
                        margin: r(10px 0 10px 20px);
                    }

                    .image-list {
                        display: flex;
                        margin: r(20px 0);

                        .image-wrapper {
                            $image-size: calc(33.33% - #{r(20px)});
                            height: 0;
                            padding-bottom: $image-size;
                            width: $image-size;
                            position: relative;
                            margin-left: r(20px);
                            border-radius: r(12px);
                            overflow: hidden;

                            .image {
                                height: 100%;
                                width: 100%;
                                position: absolute;
                            }
                        }
                    }

                    .more {
                        font-size: r(20px);
                        color: #909090;
                        margin-left: r(20px);
                    }

                }
            }


            &.goods {

                .item {

                    .price {
                        display: flex;
                        justify-content: space-between;
                        padding-left: r(12px);
                        align-items: flex-end;
                        margin: r(12px 0);

                        .line {
                            font-size: r(25px);
                            color: #909090;
                            text-decoration: line-through;
                        }

                        .tip {
                            margin: 0;
                        }

                    }


                    .tip {
                        margin-top: 0;
                        font-size: r(30px);
                    }

                    .time {
                        padding-left: r(12px);
                        color: #aaa;
                        font-size: r(20px);

                        .light {
                            color: #ff6e42;
                            margin: r(0 10px);
                        }
                    }
                }

            }
        }

        .comment-wrapper {

            .tags {
                display: flex;
                flex-wrap: wrap;
                margin-top: r(20px);
                padding-left: r(20px);

                .tag {
                    flex-shrink: unset;
                    margin-right: r(20px);
                    background-color: #c4c4c4;
                    color: white;
                    padding: r(8px 20px);
                    border-radius: r(10px);

                    &.active {
                        background-color: $primary-color-light;
                    }
                }
            }

            .label {
                font-size: r(28px);
                font-weight: 500;
                color: #000000;
            }


            .item {
                display: flex;
                background: white;
                margin: r(30px 30px 0 30px);
                padding: r(30px);
                border-radius: r(20px);


                .left {
                    width: r(78px);
                    height: r(78px);
                    border-radius: 50%;
                    margin-right: r(20px);
                }

                .right {
                    flex: 1;
                    width: calc(100% - #{r(98px)});

                    .top {
                        display: flex;
                        align-items: center;

                        .name {
                            flex: 1;
                            font-size: r(26px);
                            color: #000000;
                        }

                        .time {
                            flex-shrink: 0;
                            color: #999999;
                            font-size: r(24px);
                        }
                    }

                    .info {
                        display: flex;
                        align-items: center;
                        margin-top: r(14px);
                        padding: 0;

                        .label {
                            font-size: r(24px);
                            color: #666666;
                            margin-right: r(12px);
                        }
                    }

                    .content {
                        margin: r(20px 0);
                        font-size: r(24px);
                        color: #999999;
                    }

                    .img {
                        height: 100%;
                        width: 100%;
                        position: absolute;

                    }
                }

                .image-wrapper .img {
                    border-radius: r(20px);
                    border: 1px solid #f2f2f2;
                }
            }

        }
    }


    .coupon-list {


        .none {
            margin-top: r(50px);
        }

        .item {
            margin: r(0 20px 20px 20px);
            display: flex;
            border: 1px solid rgba(#909090, 0.24);
            border-radius: r(10px);
            align-items: center;
            padding: r(0 20px);
            height: r(128px);

            .money {
                font-size: r(30px);
                color: #E83E3C;

                .num {
                    font-size: r(46px);
                }
            }

            .center {
                flex: 1;
                font-size: r(26px);
                color: #333333;

                .desc {
                    color: #909090;
                }
            }

            .right {
                font-size: r(22px);
                height: r(33px);
                width: r(80px);
                border-radius: r(40px);
                background-color: white;
                border: 1px solid $primary-color;
                color: $primary-color;
                padding: 0;
            }

        }

    }
}
</style>